<template>
  <page-header-wrapper :title="false">
    <a-card class="content-card">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="6" :sm="24">
              <a-form-item label="邮箱">
                <a-input v-model="queryParam.email" placeholder="邮箱" allowClear />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <span class="table-page-search-submitButtons">
                <a-button type="primary" @click="getList">查询</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <a-table 
        size="middle"
        :columns="columns" 
        :data-source="data" 
        :rowKey="r=>r.id"
        :pagination="pagination"
        @change="paginationChange"
        :loading="loading"
      >
      </a-table>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { getSubsribleList} from '@/api/manage'

export default {
  name: 'Subscribe',
  data() {
    return {
      queryParam: {},
      loading: false,
      pagination: {
        total: 0,
        defaultPageSize: 10,
        showTotal: total => `共 ${total} 条`
      },
      pageNo: 1,
      pageSize: 10,
      data: [],
      columns: [
        {title: '序号',customRender:(t,r,i) =>`${i+1}`, align:'center',width:70 },
        {title: '邮箱',dataIndex: 'email',key: 'email' },
      ]
    }
  },
  methods: {
    // 分页查询
    paginationChange(e) {
      this.pageNum = e.current
      this.pageSize = e.pageSize
      this.getList()
    },
    // 用户列表
    getList() {
      this.loading = true
      getSubsribleList({
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        ...this.queryParam
      }).then(res => {
        this.loading = false
        if(res.code == '0') {
          this.data = res.data.result
          this.pagination.total = res.data.count
        }
      })
    },
  },
  mounted() {
    this.getList()
  }
}
</script>